<template>
<div class="userInfo">
  <h1>感谢您的帮助：</h1>
  <el-dialog title="评价对方" :visible.sync="dialogFormVisible">
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="评价内容" :label-width="formLabelWidth">
        <el-input v-model="ruleForm.comment" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="评分" prop="value" :label-width="formLabelWidth">
        <el-rate
            v-model="ruleForm.value"
            show-text>
        </el-rate>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
    </div>
  </el-dialog>
  <div class="btn" v-if="snapshotInfo.status===1">
    <h1>等待求助用户确认订单：</h1>
    <el-button plain @click="HandUpdateSnapshotInfo(4)">取消订单</el-button>
    <el-button type="warning" @click="HandContact" plain>联系对方</el-button>
  </div>
  <div class="btn" v-if="snapshotInfo.status===2">
    <h2>订单正在进行中：</h2>
    <el-button plain @click="HandUpdateSnapshotInfo(4)">取消订单</el-button>
    <el-button type="warning" @click="HandContact" plain>联系对方</el-button>
  </div>
  <div class="btn" v-if="snapshotInfo.status===3">
    <h1>求助用户取消了订单</h1>
  </div>
  <div class="btn" v-if="snapshotInfo.status===4">
    <h1>您取消了订单</h1>
  </div>
  <div class="btn" v-if="snapshotInfo.status===5 && snapshotInfo.evaluationStatus === 0">
    <el-button type="primary" @click="HandUpdateEvaluationStatus(2)">评价对方</el-button>
  </div>
  <div class="btn" v-if="snapshotInfo.status===5 && snapshotInfo.evaluationStatus === 1">
    <el-button type="primary" @click="HandUpdateEvaluationStatus(3)">评价对方</el-button>
  </div>
  <div class="btn" v-if="snapshotInfo.status===5 && (snapshotInfo.evaluationStatus === 2 || snapshotInfo.evaluationStatus === 3)">
    <h1>订单已完成</h1>
  </div>
  <div class="btn" v-if="snapshotInfo.status===6">
    <h1>订单已经被您取消了</h1>
  </div>
  <div class="btn" v-if="snapshotInfo.status===7">
    <h1>订单已经被求助用户取消了</h1>
  </div>
</div>
</template>

<script>
import {mapState} from "vuex";
import {reqAddAssUser, reqEvaluate, reqUpdateSnapshotOrder, reqUserInfoById} from "@/api";

export default {
  name: "HelpUserInfo",
  data(){
    return{
      helpUserInfo:{},
      dialogFormVisible: false,
      formLabelWidth: '120px',
      evaluationStatus: null,
      ruleForm: {
        value: null,
        comment: '',
      }
    }
  },
  computed: {
    ...mapState({
      userDetailInfo: state => state.helpOrderItems.userDetail,
      snapshotInfo: state => state.myOrder.SnapshotInfo,
      getuserInfo: state => state.user.userInfo,
      users: state => state.chat.users,
      orderDetailInfo: state => state.helpOrderItems.orderDetailInfo,
    })
  },
  async mounted() {
    await reqUserInfoById(this.snapshotInfo.helpUserCode).then((item) => {
      this.helpUserInfo = item
    })
  },
  methods:{

    //提交表单
    async submitForm() {
      if (this.ruleForm.value != 0){
        //状态
        //reqEvaluate = (evaluationStatus,evaluatedUserId,commentUserId,orderInitiateCode,comment,grade)
        // reqEvaluate(state,this.snapshotInfo.groupUserCode,this.getuserInfo.id,this.snapshotInfo.orderInitiateCode)
        await reqEvaluate(this.evaluationStatus,this.snapshotInfo.groupUserCode,this.getuserInfo.id,this.snapshotInfo.id,this.ruleForm.comment,this.ruleForm.value).then(()=>{
          this.$store.dispatch('GetSnapshotInfo',this.snapshotInfo.id);
          this.dialogFormVisible = false
        })
        console.log(this.snapshotInfo)
        console.log(this.getuserInfo)
      }else {
        this.$message({message: '请选择评分', type: 'warning', showClose: true});
      }
    },
    HandUpdateEvaluationStatus(state){
      this.dialogFormVisible = true
      this.evaluationStatus = state
    },

    async HandContact() {
      try {
        // 查询当前用户对象有没有历史聊过天
        this.users.forEach((item) => {
          console.log(2)
          if (item.userId === this.userDetailInfo.id) {
            console.log(3)
            this.$store.dispatch('UpdateChatUser', item.userInfo);
            this.$router.push("/chat");
            throw new Error();
          }
        })
        //把对方id，订单详情传回后台
        await reqAddAssUser(this.userDetailInfo.id, this.orderDetailInfo.id, this.getuserInfo.id)
        this.$store.dispatch('UpdateChatUser', this.userDetailInfo);
        this.$router.push("/chat");
      } catch (e) {
        console.log('对方已经是聊天好友了或出错了')
      }
    },
    async HandUpdateSnapshotInfo(status) {
      const loading = this.$loading({
        lock: true,
        text: '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      await reqUpdateSnapshotOrder(this.snapshotInfo.id,status).then(() => {
        loading.close();
        this.$message({message: '提交成功', type: 'success', showClose: true});
      })
      await this.$store.dispatch('UpdateSnotInfo', status);
    }
  }
}
</script>

<style scoped>
.userInfo{
  width: 90%;
  height: 120px;
  margin-left: 3%;
}
.userInfo .block{
  padding-top: 10px;
  float: left;
}
.userName{
  float: left;
  margin-top: 30px;
  margin-left: 40px;
}
.userName h3{
  margin-top: 2px;
  float: left;
}
.userName el-avatar{
  float: right;
  padding-top: 10px;
}
.prestige{
  width: 250px;
  margin-top: 10px;
}
.prestige span{
  float: left;
}
.prestige .el-rate{
  margin-left: 50px;
}
.time{
  margin-top: 10px;
  margin-left: 30px;
}
.btn{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
}
.btn .el-button{
  margin-left: 40px;
}


</style>
